<script setup lang="ts">
interface Props {
  data: any
  query: string
  total: number
}

const props = defineProps<Props>()

const renderData = () => {
  try {
    const formattedData = JSON.stringify(props.data, null, 2)
    return `<pre class="data-container">${formattedData}</pre>`
  } catch (e) {
    return `<div class="data-container">${String(props.data)}</div>`
  }
}
</script>

<template>
  <div class="warning-log-detail card">
    <div class="card-header pb-3">
      <div class="d-flex align-center gap-2">
        <span class="text-secondary">查询条件: </span>
        <span class="query">{{ query }}</span>
      </div>
      <span class="total">共 {{ total }} 条</span>
    </div>

    <div class="card-body">
      <div class="data-title mb-2">日志数据:</div>
      <div class="data-content" v-html="renderData()"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.warning-log-detail {
  .card-header {
    font-size: 14px;
    .query {
      color: var(--primary-color);
      font-weight: 500;
    }
    .total {
      color: var(--text-tertiary);
    }
  }

  .data-title {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .data-content {
    :deep(.data-container) {
      background-color: var(--bg-quaternary);
      padding: var(--spacing-md);
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      font-family: Consolas, Monaco, 'Andale Mono', monospace;
      font-size: 13px;
      line-height: 1.5;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
</style>
